<template>
  <div>
    <template v-if="!loginUser">
    <p class="fw-light mb-3">
      为防止垃圾评论需
      <span class="fc-red fw-light mx-2">注册用户</span>
      后才能评论。您的电子邮箱地址不会被公开。
    </p>
    <b-form @submit.stop.prevent="submit">
      <b-row class="my-2">
        <b-col>
          <b-form-input
            id="input-user"
            v-model="username"
            :state="usernameState"
            placeholder="用户名*"
            class="fw-light py-2"
            @focus="usernameFocusHandle"
          ></b-form-input>
          <b-form-invalid-feedback>
            用户名不能为空
          </b-form-invalid-feedback>
        </b-col>
      </b-row>
      <b-row class="my-2">
        <b-col>
          <b-form-input
            id="input-password"
            type="password"
            v-model="password"
            :state="passwordState"
            placeholder="密码*"
            class="fw-light py-2"
            @focus="passwordFocusHandle"
          ></b-form-input>
          <b-form-invalid-feedback>
            密码不能为空
          </b-form-invalid-feedback>
        </b-col>
      </b-row>
      <b-row class="my-2">
        <b-col>
          <b-form-input
            v-model="email"
            id="input-email"
            placeholder="邮箱*"
            :state="emailState"
            class="fw-light py-2"
            @focus="emailFocusHandle"
          ></b-form-input>
          <b-form-invalid-feedback>
            注册时邮箱不能为空
          </b-form-invalid-feedback>
        </b-col>
      </b-row>
      <b-row>
        <b-col class="d-flex justify-content-end align-items-center">
          <b-btn type="submit" class="submit px-3 py-2 fw-light m-2">登录</b-btn>
          <b-btn class="register px-3 py-2 fw-light m-2"  @click="register">注册</b-btn>
        </b-col>
      </b-row>
    </b-form>
    </template>
    <template v-else>
      <h3 class="fw-light">{{loginUser}}, 欢迎回来, <b-link class="logout fc-red" @click="logout">退出</b-link></h3>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "Login",
  data() {
    return {
      username: "",
      email: "",
      password: "",
      usernameState: null,
      passwordState: null,
      emailState: null,
    };
  },

  methods: {
    // Input 焦点监控
    usernameFocusHandle() {
      this.usernameState = null;
    },
    passwordFocusHandle() {
      this.passwordState = null;
    },
    emailFocusHandle() {
      this.emailState = null;
    },

    // 重置表单
    resetForm(){
      this.username =  "";
      this.email = "";
      this.password = "";
      this.usernameState = null;
      this.passwordState = null;
      this.emailState =null;
    },

    checkUsernameInvalid(){
      return this.username !== ''
    },
    checkPasswordInvalid(){
      return this.password !== ''
    },
    checkEmailInvalid(){
      return this.email !== ''
    },
    // 提交登录
    submit() {
      this.usernameState = this.checkUsernameInvalid()
      this.passwordState = this.checkPasswordInvalid()
      if (!this.usernameState ||  !this.passwordState) return;
      const user ={
        username: this.username,
        password: this.password
      }
      this.$store.dispatch('login', user)
    },

    register(){
      this.usernameState = this.checkUsernameInvalid()
      this.passwordState = this.checkPasswordInvalid()
      this.emailState = this.checkEmailInvalid()
      if (!this.usernameState ||  !this.passwordState || !this.emailState) return;
      const user = {
        username: this.username,
        password: this.password,
        email: this.email
      }
      this.$store.dispatch('register', user)
    },

    logout(){
      this.resetForm()
      this.$store.commit('LOGOUT');
    }
  },

  computed: {
    ...mapState(['loginUser']),
  },


  mounted(){
    this.resetForm()
    this.$store.dispatch('checkLogin')
  }

};
</script>

<style lang="less" scoped>
.register {
  text-decoration: none;
}
.modal-header-close{
    cursor: pointer;
}
.register{
  border: none;
  background: rgb(208, 66, 44);
  color: #FFF;
}
.register:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: rgb(208, 66, 44);
}
.register:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: rgb(208, 66, 44);
}
.logout{
  text-decoration: none;
}
</style>